<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>boot1_test2</title>
	<style>
		*{margin: 0; padding: 0}
		#top{
			width: 100%; height: 280px;
			background: linear-gradient(45deg,#020031,#6d3353);
			text-shadow: 0 1px 3px rgba(0,0,0,.4), 0 0 30px rgba(0,0,0,.075);
			box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
			display: flex;
			flex-flow: column wrap;
			align-items: center;
		}
		#top h1{
			color: #fff;
			font-size: 90px;
			
		}
		#top p{color: #666666; font-size: 24px;}
		button{
			width: 290px; height: 54px;
			background: #337ab7;
			color: white;
			font-size: 18px;
			border: 0;
			border-radius: 4px;
			margin-top: 20px;
			margin-bottom: 30px;
			
		}
		#top a{
			text-decoration: none;
			color: white;
		}
		@media screen and (min-width: 992px){
			#bottom img{
				float: left;
				width: 25%;
			}
			#top{height: 360px;}
		}
		@media screen and (max-width: 991px) and (min-width: 768px){
			#bottom img{
				float: left;
				width: 50%;
			}
		}
		@media screen and (max-width: 767px){
			#bottom img{
				float: left;
				width: 100%;
			}
		}
		
		/*#top:after{*/
		/*	content: "";*/
		/*	display: block;*/
		/*	position: absolute;*/
		/*	top: 0;*/
		/*	bottom: 0;*/
		/*	left: 0;*/
		/*	right: 0;*/
		/*	background: url("img/ahead.png");*/
		/*}*/
		
	</style>
</head>
<body>

<div class="content">
	<div id="top">
		<h1>BootStrap</h1>
		<p>简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。</p>
		<button>Bootstrap3中文文档(v3.3.7)</button>
		<a>Bootstrap2中文文档(v2.3.2)</a>
	</div>
	<div id="bottom">
		<img src="img/b1.png"><img src="img/b2.png"><img src="img/b3.png"><img src="img/b4.png">
	</div>
</div>


</body>
</html>